<template>
  <div>
    姓名 {{persion.name}}，年龄 {{persion.age}} {{msg}}
  </div>
  和为{{sum}}
  <br>
  <button @click="ageName">改名</button>
  <button @click="sum++;msg+='!'">加一</button>
</template>

<script>
import { reactive,ref,watch} from "vue";

export default {
  name:"Demo",
  setup(props,context) {
    let sum = ref(0)
    let msg = ref('hello')
    let persion = reactive({
      name : '张三',
      age : 19
    })
    // 情况1：监视单个 ref 定义的基本数据类型
    // watch(sum,(newValue,oldValue)=>{
    //   console.log('sum被改变了',newValue,oldValue);
    // })

    // 情况2：监视多个 ref 定义的基本数据类型
    // watch([sum,msg],(newValue,oldValue)=>{
    //   console.log('sum被改变了',newValue,oldValue);
    // },{immediate:true})
    
    // 情况3：监视 reactive 定义的引用数据类型（此种情况默认开启深度监视，无法关闭，监视具体属性需要手动配置深度监视）
    // watch(persion,(newValue,oldValue)=>{
    //   console.log('persion被改变了',newValue,oldValue);
    // })

    // 情况4：监视 reactive 定义的引用数据类型中的具体值
    // watch(()=>persion.name,(newValue,oldValue)=>{
    //   console.log('persion被改变了',newValue,oldValue);
    // })

    // 情况5：监视 多个 reactive 定义的引用数据类型中的具体值
    watch([()=>persion.name,()=>persion.age],(newValue,oldValue)=>{
      console.log('persion被改变了',newValue,oldValue);
    })

    // 方法
    function ageName() {
      persion.name = '李四'
    }
    // 暴露数据
    return {
     persion,ageName,sum,msg
    }
    
  },
  
}
</script>

<style>
  button {
    margin: 3px 10px;
  }
</style>